<template>
  <!--个人或他人主页-->
  <div class="home">
    <div class="bgcImg">
      <span class="avatar"><img :src="userFrom.avatar" alt=""></span>
      <span class="username">{{ userFrom.username }}</span>
      <div v-if="userFrom.id !== id" class="button">
        <el-button type="primary" style="margin-right: 18px;">加好友</el-button>
        <router-link :to=" {path:'/shopping/chat', query:{userId} }" target="_blank">
          <el-button>发消息</el-button>
        </router-link>
      </div>
    </div>
    <el-card class="tag">
      <svg t="1699077648887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3713" width="200" height="200"><path d="M925.866667 396.8l-32-27.733333c-78.933333-66.133333-185.6-157.866667-320-273.066667l-12.8-10.666667C533.333333 61.866667 490.666667 61.866667 462.933333 85.333333l-151.466666 130.133334c-85.333333 72.533333-155.733333 132.266667-211.2 179.2-17.066667 12.8-25.6 32-25.6 53.333333v4.266667c2.133333 38.4 34.133333 66.133333 70.4 66.133333H192v358.4c0 29.866667 23.466667 53.333333 53.333333 53.333333h164.266667c27.733333-2.133333 49.066667-25.6 49.066667-53.333333v-185.6c0-12.8 8.533333-21.333333 21.333333-21.333333h64c12.8 0 21.333333 8.533333 21.333333 21.333333v185.6c0 29.866667 23.466667 53.333333 53.333334 53.333333h164.266666c27.733333-2.133333 49.066667-25.6 49.066667-53.333333V518.4h46.933333c38.4 0 70.4-32 70.4-70.4 0-21.333333-8.533333-38.4-23.466666-51.2z" fill="#00c091" p-id="3714" /></svg><div class="p">主页</div>
      <div class="line" />
    </el-card>
    <el-card class="body">
      <p class="goods">TA的物品</p>
      <el-tag size="mini">{{ goodsList.length }}</el-tag>
      <ul v-if="goodsList.length <= 0"><el-card class="kong">暂无出售物品</el-card></ul>
      <ul v-else class="userGoods">
        <li v-for="item in goodsList" :key="item.goodsId" :title="item.goodsId" @mouseenter="getGoodsId">
          <router-link :to="{path:'/shopping/detai',query:{detaiGoodsId} }" target="_blank">
            <img :src="item.goodsImg" alt="">
          </router-link>
        </li>
      </ul>
    </el-card>
    <el-card class="userInfo">
      <p class="info">个人资料</p>
      <hr>
      <span class="id"><pre>用户Id     {{ userFrom.id }}</pre></span>
      <span class="id"><pre>电子邮箱   {{ userFrom.email }}</pre></span>
      <span class="id"><pre>联系电话   {{ userFrom.phone }}</pre></span>
      <span v-if="userFrom.status === 1" class="id"><pre>用户状态   正常</pre></span>
      <span v-else class="id"><pre>用户状态   禁用</pre></span>
      <span v-if="role === 'admin'" class="id"><pre>用户权限   超级管理员({{ role }})</pre></span>
      <span v-if="role === 'check'" class="id"><pre>用户权限   审核员({{ role }})</pre></span>
      <span v-if="role === 'student'" class="id"><pre>用户权限   学生({{ role }})</pre></span>
      <span v-if="role === 'disable'" class="id"><pre>用户权限   无法使用({{ role }})</pre></span>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import userApi from '@/api/userManage'
import goodsApi from '@/api/goodsManage'
export default {
  data() {
    return {
      userFrom: {},
      goodsList: [],
      role: '',
      detaiGoodsId: '',
      userId: this.$route.query.userId
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    this.getUserFromByUserId(this.userId)
  },
  methods: {
    // 获取指定物品Id
    getGoodsId(e) {
      this.detaiGoodsId = e.target.title
    },
    // 获取用户的权限信息
    getRoleNameByUserId(userId) {
      userApi.getRoleNameByUserId(userId).then(response => {
        const roleFrom = response.data
        this.role = roleFrom[0]
        console.log(this.role)
      })
    },
    // 获得用户物品信息
    getGoodsInfoByUsername(username) {
      goodsApi.getGoodsInfoByUsername(username).then(response => {
        this.goodsList = response.data
        console.log(this.goodsList)
      })
    },
    // 获得用户信息
    getUserFromByUserId(userId) {
      userApi.getUserById(userId).then(response => {
        this.userFrom = response.data
        console.log(this.userFrom)
        this.getGoodsInfoByUsername(this.userFrom.username)
        this.getRoleNameByUserId(this.userFrom.id)
      })
    }
  }
}
</script>

<style src="../../styles/home.css" scoped>

</style>
